<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="10" :order="1" class="tool-action">
                    <a-range-picker v-model="params.creates"  format="YYYY-MM-DD HH:mm:ss"
                                    :showTime="{ hideDisabledOptions: true,
                                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}"/>
                    <a-button icon="search" type="primary" @click="onSearch">查询</a-button>
                </a-col>
                <a-col :span="14" :order="2" class="tool-pagination">
                    <a-button type="primary" icon="plus" @click="onAdd">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="location" slot-scope="location">
                    {{getLocation(location)}}
                </template>
                <template slot="createAt" slot-scope="createAt">
                    {{moment(createAt).format('YYYY-MM-DD HH:mm:ss')}}
                </template>
                <template slot="status" slot-scope="text,record">
                    <a-switch checkedChildren="广播" unCheckedChildren="禁用" @change='onChangeStatus(record)'  :checked="record.status=='AVAILABLE'" />
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onEdit(record)"  class="ant-btn-text"><a-icon type="form" /></a>
                    <a-divider type="vertical" />
                    <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                    <a-pagination  :total="total"  @change="onPageChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
        <a-modal top="2vh" title="公告" v-model="dialogVisible" :footer="null" width="700px" :maskClosable="false" @cancel="handleClose">
            <a-form :form="form" layout="horizontal">
                <a-form-item label="位置" v-bind="formItemLayout">
                    <a-select v-decorator="['location',{rules:[{required:true,message:'请选择公告位置'}]}]">
                        <a-select-option v-for="item in locationList" :key="item.id" :value="item.code">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="内容" v-bind="formItemLayout">
                    <a-textarea placeholder="公告内容" v-decorator="['content',{rules:[{required:true,message:'请输入公告内容'},{max:240,message:'公告内容最长240字'}]}]" :autosize="{ minRows: 3, maxRows: 6 }" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="onSave" :loading="isFormLoading"> 保 存 </a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
    import {findList,deleted,save,changeStatus} from "../../api/notice";
    import {findListByType} from "../../api/pubData";
    import moment from 'moment'
    import ATextarea from "ant-design-vue/es/input/TextArea";

    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '位置',dataIndex: 'location', align:'center',width: 150,scopedSlots: { customRender: 'location' }},
        {title: '公告内容',dataIndex: 'content',align:'center'},
        {title: '创建时间',key: 'createAt',align:'center',scopedSlots: { customRender: 'createAt' }},
        {title: '状态',key: 'status',align:'center',scopedSlots: { customRender: 'status' }},
        {title: '操作',key: 'operation',align:'center',width: 200,scopedSlots: { customRender: 'operation' }}];
    export default {
        components: {ATextarea},
        data() {
            return {
                columns,
                dataList: [],
                total:0,
                form: this.$form.createForm(this),
                params:{
                    dataType:103,
                    creates:[],
                    startDate:undefined,
                    endDate: undefined,
                    current:1,
                    pageSize:10,
                    sorter:{
                        field:'',
                        order:'',
                    },
                },
                locationList:[],
                loading:false,
                dialogVisible:false,
                editRecord:{},
                isFormLoading:false,
            }
        },
        computed:{
            formItemLayout(){
                return {
                    labelCol: { span:4},
                    wrapperCol: { span:18 },
                }
            }
        },
        methods: {
            moment,
            getLocation(locationCode){
                if(this.baseUtil.isNotBlank(locationCode)){
                    let location = this.locationList.find(m=>m.code === locationCode);
                    if(location != null) return location.name;
                }
                return '--'
            },
            onSearch(){
                this.params.current = 1;
                this.loadData();
            },
            onPageChange(current){
                this.params.current = current;
                this.loadData();
            },
            handleClose(){
                this.dialogVisible = false;
            },
            onAdd(){
                this.dialogVisible = true;
                this.editRecord = {}
                this.$nextTick(()=>{
                })
            },
            onEdit(record){
                this.dialogVisible = true;
                this.editRecord = record;
                this.$nextTick(()=>{
                    this.form.setFieldsValue({location:record.location,content:record.content})
                })
            },
            onSave(){
                this.isFormLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            this.handleSave({...this.editRecord,...values});
                        }else{
                            this.isFormLoading = false;
                        }
                    },
                )
            },
            async handleSave(data){
                let resp = await save(data)
                this.isFormLoading = false;
                if(this.qUtil.validResp(resp)){
                    this.$message.success('信息已保存')
                    this.dialogVisible = false;
                    this.loadData();
                }
            },
            onChangeStatus(row){
                let statusStr = "";
                statusStr = row.status=='AVAILABLE'?'禁用':'广播';
                let _this = this;
                this.$confirm({
                    title: '确认'+statusStr+'该公告吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        row.status = row.status=='AVAILABLE'?'FREEZE':'AVAILABLE';
                        _this.handleChangeStatus(row.id,row.status);
                    }, onCancel() {},
                })
            },
            async handleChangeStatus(id,status){
                let resp = await changeStatus(id,status);
                if(this.qUtil.validResp(resp)){
                    this.$message.success('状态已更改')
                    this.loadData();
                }else{
                    this.$message.error(resp.msg||'操作失败')
                }
            },
            //删除
            onDeleted(id){
                let _this = this;
                this.$confirm({
                    title: '确认删除该公告吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleDelete(id);},
                    onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deleted(id);
                if(this.qUtil.validResp(resp)) {
                    this.$message.success('公告已删除');
                    this.loadData();
                }
            },
            async loadBaseData(){
                let resp = await findListByType(this.params.dataType)
                console.log("=====>",resp)
                if(this.qUtil.validResp(resp)){
                    this.locationList = resp.data.dataList || []
                }
            },
            async loadData(){
                this.loading = true;
                let data = {...this.params}
                if(data.creates.length >0){
                    data.beginDate = data.creates[0].format('YYYY-MM-DD HH:mm:ss'),
                        data.endDate = data.creates[1].format('YYYY-MM-DD HH:mm:ss');
                }else{
                    data.beginDate = '';
                    data.endDate = '';
                }
                let resp = await findList(data);
                this.loading = false;
                if(this.qUtil.validResp(resp)) {
                    this.total = resp.data.total;
                    this.dataList = resp.data.dataList;
                    console.log("==dataList", this.dataList);
                }
            }
        },
        mounted(){
            this.loadBaseData();
            this.loadData();
        }
    }
</script>
<style>

</style>
